<template>
  <div class="class_container">

    <div class="video_container">
      <!-- <video-player class="vjs-default-skin vjs-big-play-centered" :options="playerOptions" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)">
      </video-player> -->

      <video v-if="resourceType!=1" class="video-js" id="myVideo" controls="controls" ref="video" preload="preload" objectFit="contain" autoplay="autoplay">
        <source v-bind:src="resourceUrl" type="video/mp4">
      </video>

      <div v-else>
        <img src="../assets/image/learning_header_img_2@2x.png" alt="">
        <p>{{courseName}}</p>
      </div>

    </div>

    <van-tabs @click="onClick" animated class="tabs">
      <van-tab title="目录" name="目录">
        <van-list v-model="loading" :finished="finished" finished-text="暂无更多数据" @load="onLoad">
          <ul class="chapterList clearfix">
            <li v-for="(item,index) in chapterList" :key="index" :class="[selectIndex===index?'active':'']" @click="leftItemClick(item,index)">
              <img class="icon" src="../assets/image/class_icon_1@2x.png" alt="">
              <p class="van-ellipsis">
                {{item.chapterName}}
              </p>
              <span>去学习</span>
            </li>
          </ul>
        </van-list>

      </van-tab>
      <van-tab title="练习" name="练习">

        <div class="answerList" v-if="examItem.content">
          <p class="total">
            {{position+1}}/{{length}}

            <span class="questionType">
              单选题
            </span>
          </p>
          <div class="question_title">{{examItem.content.question}}</div>
          <ul>
            <li @click="optionClick(1)" :class="examItem.state.flag1==1?'right':examItem.state.flag1==2?'wrong':'default'">
              {{examItem.content.option1}}
            </li>
            <li @click="optionClick(2)" :class="examItem.state.flag2==1?'right':examItem.state.flag2==2?'wrong':'default'">
              {{examItem.content.option2}}
            </li>

            <li @click="optionClick(3)" :class="examItem.state.flag3==1?'right':examItem.state.flag3==2?'wrong':'default'">
              {{examItem.content.option3}}
            </li>

            <li @click="optionClick(4)" :class="examItem.state.flag4==1?'right':examItem.state.flag4==2?'wrong':'default'">
              {{examItem.content.option4}}
            </li>

          </ul>
          <div class="analysis" v-if="isAnalysis">{{examItem.content.answerAnalysis}}</div>

          <div class="btnList">
            <van-button round @click="lastExercise()" type="warning">上一题</van-button>
            <van-button round plain @click="analysisClick()" type="info">答案解析</van-button>
            <van-button round @click="nextExercise()" type="info">下一题</van-button>

          </div>
        </div>

        <div class="nodata" v-else>
          暂无联系题~
        </div>

      </van-tab>
    </van-tabs>

  </div>
</template>
<script>
import path from '@/network'
import { Toast } from 'vant';
export default {
  name: 'App',
  data () {
    return {
      total: 0,
      pagesize: 10,
      currentPage: 1,
      exerciseList: [],
      chapterList: [],

      loading: false,
      finished: false,
      dataTotal: '',


      playerOptions: {
        height: '360',
        sources: [{
          type: "rtmp/mp4",
          src: '',

        }],
        techOrder: ['flash'],
        autoplay: false,
        controls: true,
        poster: "../../../src/static/img/poster.png"
      },


      exerciseData: null,
      examItem: {
        content: '',
        state: {
          flag1: 0,
          flag2: 0,
          flag3: 0,
          flag4: 0,
        },
        question: '',
      },
      position: 0,
      isAnalysis: false,
      optionCanClick: true,
      length: 0,
      //resourceUrl: 'https://cdn2.pluslegal.cn/test.pdf',
      resourceUrl: '',
      resourceType: '',
      Info: '',
      index: 0,
      selectIndex: 0,
      name: this.$route.query.name,
      flag: true,

      pageNum: 1,
      pageTotalNum: 1, // 总页数
      loadedRatio: 0, //当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成

    };
  },

  created () {
  },
  beforeDestroy () {
  },

  mounted () {
    this.getChapterList(this.$route.query.id);
    this.getExerciseList(this.$route.query.id);
    this.currentPage = 1;



  },
  methods: {

    //获取list
    getChapterList (id) {
      path.getChapterList(
        this.currentPage,
        this.pagesize,
        id
      ).then(res => {
        if (res.success === 0) {
          // this.chapterList = res.rows

          if (res.rows[0].resourceUrl) {
            //默认显示列表第一条
            this.resourceUrl = res.rows[0].resourceUrl
            //1-pdf 2-语音 3-video
            this.resourceType = res.rows[0].resourceTyp

            if (this.resourceType != 1) {
              console.log(this.resourceUrl)
              var video = document.getElementById('myVideo')
              video.src = this.resourceUrl
              video.play();
            }

          }
          this.dataTotal = res.total
          //        console.log('dataTotal', this.dataTotal)
          if (this.dataTotal <= this.pagesize) {
            this.chapterList = res.rows
          } else {
            this.currentPage++
            //          console.log('currentPage', this.currentPage)
            let arr = res.rows
            this.chapterList = this.chapterList.concat(arr)
          }

          this.loading = false
          if (this.chapterList.length >= this.dataTotal) {
            this.finished = true //结束 
          }
        }
      })
    },
    //获取list
    getExerciseList (id) {
      path.getExerciseList(
        this.currentPage,
        this.pagesize,
        id
      ).then(res => {
        if (res.success === 0) {
          if (res.rows.length > 0) {
            this.exerciseData = res.rows
            this.length = res.rows.length
            this.examItem = {
              content: res.rows[this.position],
              state: {
                flag1: 0,
                flag2: 0,
                flag3: 0,
                flag4: 0,
              }
            }

          }
        }
      })
    },
    onLoad () {
      this.getChapterList(this.$route.query.id);
    },
    analysisClick () {
      this.isAnalysis = !this.isAnalysis
    },

    lastExercise () {
      this.optionCanClick = true,
        this.isAnalysis = false;
      this.position--;
      if (this.position >= 0) {

        this.examItem = {
          content: this.exerciseData[this.position],
          state: {
            flag1: 0,
            flag2: 0,
            flag3: 0,
            flag4: 0,
          }
        }

      } else {
        this.position = 0
        Toast.fail({
          message: '当前是第一题!',
          forbidClick: true,
        });
        return
      }
    },
    nextExercise: function () {
      this.optionCanClick = true,
        this.isAnalysis = false
      this.position++;
      if (this.position < this.length) {
        this.examItem = {
          content: this.exerciseData[this.position],
          state: {
            flag1: 0,
            flag2: 0,
            flag3: 0,
            flag4: 0,
          }
        }

      } else {
        this.position--;
        Toast.fail({
          message: '已经是最后一题!',
          forbidClick: true,
        });
      }
    },


    //选项点击事件
    optionClick (e) {
      let pos = e;
      let correct = this.examItem.content.correct
      if (this.optionCanClick) {

        this.optionCanClick = false
        if (correct == pos) {
          switch (pos + '') {
            case '1':
              this.examItem.state.flag1 = 1
              break
            case '2':
              this.examItem.state.flag2 = 1
              break
            case '3':
              this.examItem.state.flag3 = 1
              break
            case '4':
              this.examItem.state.flag4 = 1
              break
          }
        } else {
          switch (pos + '') {
            case '1':
              this.examItem.state.flag1 = 2

              break
            case '2':
              this.examItem.state.flag2 = 2

              break
            case '3':
              this.examItem.state.flag3 = 2

              break
            case '4':
              this.examItem.state.flag4 = 2

              break
          }

          switch (correct + '') {
            case '1':
              this.examItem.state.flag1 = 1

              break
            case '2':
              this.examItem.state.flag2 = 1
              break
            case '3':
              this.examItem.state.flag3 = 1

              break
            case '4':
              this.examItem.state.flag4 = 1

              break
          }

          // console.log("examItem", JSON.stringify(this.examItem))
        }
      }
    },
    leftItemClick (item, index) {
      this.resourceType = item.resourceType
      this.restResoure()
      this.Info = item.title;
      this.resourceUrl = item.resourceUrl;
      this.selectIndex = index;
      var _this = this;

      if (_this.resourceType == 3) {
        let vdo = document.getElementById('myVideo');
        vdo.src = item.resourceUrl
        vdo.play();
      }
      if (_this.resourceType == 2) {
        let audio = document.getElementById('myAudio');
        audio.src = item.resourceUrl
        audio.play();
      }
      if (_this.resourceType == 1) {
        this.$router.push({ name: 'pdf_details', query: { resourceUrl: item.resourceUrl, type: 1 } })
      }

    },
    restResoure () {
      // 每次切换点击时关闭正在播放的语音视频
      let mp3 = document.getElementById('myAudio');
      if (mp3) {
        mp3.pause()
      }

      let vdo = document.getElementById('myVideo');
      if (vdo) {
        vdo.pause()
      }

      this.pageNum = 1;
      this.pageTotalNum = 1
    },


    onClick (name, title) {
      // if (name == '练习') {
      //   this.restResoure()
      // }
    },


    onPlayerPlay: function () {
    },
    onPlayerPause: function () {
    },


  }

}
</script>